<!-- 商户下拉选择 -->
<template>
  <el-select
    v-model="formData[prop]"
    :placeholder="placeholder"
    clearable
    filterable
    @change="selectChange"
  >
    <el-option
      v-for="op in ids && ids.length > 0 ? optionsIds : options"
      :key="op.id"
      :label="op.nickname"
      :value="op.id"
    />
  </el-select>
</template>

<script>
import { member } from '@/api/common'
export default {
  name: 'SupplierSelect',
  props: {
    formData: {
      type: Object,
      required: true
    },
    prop: {
      type: [Array, String],
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    ids: {
      type: Array,
      default: null
    },
    date: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      options: [],
      optionsIds: []
    }
  },
  watch: {
    ids: {
      handler(newValue, oldValue) {
        if (this.ids && this.ids.length > 0) {
          this.optionsIds = this.options.filter(item => this.ids.some(ele => ele === item.id))
        }
      },
      deep: true
    },
    date: {
      handler(newValue, oldValue) {
        this.getList()
      },
      deep: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      member({ date: this.$tools.handleDate(this.date) }).then((res) => {
        const { data } = res
        this.options = data.list
      })
    },
    selectChange(val) {
      this.$emit('event-change', val)
    }
  }
}
</script>
